<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<style>
	canvas{
		margin:100px auto;
		border:1px solid #ccc;
		display:block;
	}
</style>
<body>
	<canvas width="600" height="400">当前浏览器不支持</canvas>
	 <span>sss</span>
	 <script>
		 //1.获取dom元素
		var cas=document.querySelector("canvas")
		// 2.获取上下文对象
		var ctx=cas.getContext('2d')
	  ctx.rect(100,10,200,200)	
	   //距离 左  上 宽 高
	    ctx.fillStyle="green";
	   	ctx.fill()
ctx.clearRect(120,10,40,40)
		ctx.lineWidth=2;
		ctx.strokeStyle="red"
		ctx.stroke();
		
	
		
	 
	 
	  ctx.fillStyle="pink"
	  ctx.fillRect(100,300,100,100)
	  
	  ctx.strokeStyle="blue";
	  ctx.lineWidth=4;
	  ctx.strokeRect(300,300,100,100)
      //一。 直线封装
	 //    console.log(ctx)
		//3.开始一条路径
		// ctx.beginPath();
		// //4.确定起点
		// ctx.moveTo(100,100)
		// //5.确定结束点
		// ctx.lineTo(300,100)
		// //6.取颜色
		// ctx.stroke()
		// //7.结束路径
		// ctx.closePath()
		// 二.直线连用
		
	// for(var i=0;i<4;i++){
		
	// 	 drawLine(100+10*i,100+10*i,280+10*i,300+10*i,"red",2)
	//      console.log(i)
	// }	

 //   // 封装方法
	// function drawLine(x1,x1,y1,y2,color,width){
	// 	 // console.log("ss")
	// 	ctx.beginPath()
	// 	ctx.moveTo(x1,x1)
	// 	ctx.lineTo(y1,y2)
	// 	// ctx.lineTo(y1,y2)
	// 	ctx.strokeStyle=color
	// 	ctx.stroke()
	// 	ctx.lineWidth=width;
	// 	ctx.closePath()
	// }
		
	 </script>
</body>
</html